<template>
	<view style="background: #F8F8F8;min-height: 100vh;">
		<view class="user-content">
			<uv-form ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" label-width="90px"
				errorType="toast">
				<view class="user-box">
					<view class="tit">投放场地<text>(带*为必填项)</text></view>
					<uv-form-item label="场所名称" prop="name" required>
						<input v-model="dynamicFormData.name" placeholder="请输入场所名称" />
					</uv-form-item>
					<uv-form-item label="场景类型" required prop="type">
						<!-- <input v-model="dynamicFormData.type_id" placeholder="请输入场景类型" /> -->
						<picker @change="setType" mode="selector" :value="typeIndex" range-key="name"
							:range="areaTypeList">
							<view>{{areaTypeList[typeIndex]?.name}}</view>
						</picker>
					</uv-form-item>
					<uv-form-item label="客服电话" required prop="kefu">
						<uv-input type="text" border="none" :maxlength="11" placeholder="请输入客服电话"
							v-model="dynamicFormData.kefu"></uv-input>
					</uv-form-item>
					<uv-form-item label="区域" required prop="city">
						<picker mode="multiSelector" :range="areaList" :value="areaIndexs" @columnchange="selectCol"
							@change="select" range-key="name">
							<view v-if="dynamicFormData.city!=''">
								{{ dynamicFormData.city}}
							</view>
						</picker>
					</uv-form-item>
					<uv-form-item label="详细地址" required prop="address" @click="selectAddress">
						{{dynamicFormData.address?dynamicFormData.address:'请选择详细地址'}}
					</uv-form-item>
				</view>
				<view class="isOpen-block">
					<view class="tit">商家分成开关</view>
					<view class="isOpen-btn">
						<switch color="#2F9AFE" :checked="hasMerchant" @change="change" />
					</view>
				</view>
				<view class="manage-block" v-if="hasMerchant">
					<view class="tit">
						<view>商家管理</view>
					</view>
					<view class="block-item">
						<view class="item" v-for="(item, idx) in children" :key="idx">
							<view class="item_left">用户：</view>
							<picker :key="idx" mode="selector" :range="userList" @change="selectUser"
								range-key="nickname">
								<view>{{item.nickname}}</view>
							</picker>
							<view class="rate">
								<input v-model="item.divide_rate" type="number" />
								<text>%</text>
							</view>
							<image src="../../static/images/area/jia.png" class="image" @click="addChild(item)"></image>
							<image src="../../static/images/area/jian.png" class="image" @click="deleteChild(idx)">
							</image>
						</view>
					</view>
				</view>
			</uv-form>
			<button size="mini" @click="submit('dynamicForm')" class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';

	export default {
		data() {
			return {
				selectedCity: '', // 选中的城市
				ground_id: null,
				// 数据源
				dynamicFormData: {
					type_id: '',
					kefu: '',
					city: '', // 区域
					is_divide: 0, // 0 关；1开
					address: '',
					lat:null,
					lng:null,
					child: [] // {	user_id: 	divide_rate: 0}
				},
				areaList: [],
				areaIndexs: [0, 0, 0],
				pro: [],
				city: [],
				county: [],
				userSrc: null,
				userList: [], // 用户列表
				areaTypeList: [],
				children: [],
				typeIndex: 0,
				hasMerchant: false,
				// 规则
				dynamicRules: {
					name: [{
						required: true,
						message: '场地名称不能为空'
					}],
					type_id: [{
						required: true,
						message: '合作类型不能为空'
					}],
					kefu: [{
						required: true,
						message: '手机号码不能为空'
					}],
					address: [{
						required: true,
						message: '请选择详细地址'
					}],
				}
			};
		},
		onLoad(options) {
			let areaList = uni.getStorageSync("areaList")
			if (!areaList) {
				api.getAreaList().then(res => {
					uni.setStorageSync("areaList", res.data)
					this.formateAreaData(res.data)
				})
			} else {
				this.formateAreaData(areaList)
			}
			this.getGroundType()
			this.getUserList()
			if (options && options.id) {
				this.ground_id = options.id
				this.getGroundDetails()
			}
		},
		onReady() {
			this.$refs.dynamicForm.setRules(this.dynamicRules);
		},
		methods: {
			selectAddress(){
				let that = this
				uni.chooseLocation({
					success: res => {
						that.dynamicFormData.lat = res.latitude;
						that.dynamicFormData.lng = res.longitude;
						that.dynamicFormData.address = res.name
					}
				});
			},
			getGroundDetails() {
				api.getGroundDetails({
					id: this.ground_id
				}).then(res => {
					this.dynamicFormData = {
						id: res.data.id,
						name: res.data.name,
						type_id: res.data.type_id,
						kefu: res.data.kefu,
						city: res.data.city,
						lat: res.data.lat,
						lng: res.data.lng,
						is_divide: res.data.is_divide, // 0 关；1开
						address: res.data.address,
					}
					if (res.data.child.length > 0) {
						this.children = res.data.child
						this.hasMerchant = true
					}
				})
			},
			getGroundType() {
				// 获取场景类型列表
				api.getGroundType().then(res => {
					this.areaTypeList = res.data
					this.dynamicFormData.type_id = this.areaTypeList[this.typeIndex].id
				})
			},
			change(e) {
				this.hasMerchant = e.detail.value;
				if (this.hasMerchant) {
					this.children = [{}]
				} else {
					this.children = []
				}
				this.dynamicFormData.is_divide = Number(this.hasMerchant);
			},
			getUserList() {
				api.getUserList().then(res => {
					if (res.data.length) {
						this.userList = res.data
					}
				});
			},
			selectUser(e) {
				let i = e.detail.value;
				if (!this.children.some(u => JSON.stringify(u) === JSON.stringify(this.userList[i]))) {
					this.children.push(this.userList[i])
					this.children = [...new Set(this.children)];
					this.children = this.children.filter(e => e.id)
				}
			},
			// 添加用户
			addChild(item) {
				for (var i = 0; i < this.children.length; i++) {
					if (!this.children[i].id) {
						return this.showToast('请选择分成商家')
					}
				}
				this.children.push({})
			},
			showToast(msg) {
				uni.showToast({
					icon: "none",
					title: msg
				})
			},
			deleteChild(index) {
				if (this.children.length == 1) {
					return this.showToast('分成开启,场地下至少有一个分佣账户存在')
				}
				this.children.splice(index, 1)
			},
			setType(e) {
				this.typeIndex = e.detail.value;
				this.dynamicFormData.type_id = this.areaTypeList[this.typeIndex].id
			},
			submit(form) {
				this.$refs[form].validate().then(res => {
					for (var i = 0; i < this.children.length; i++) {
						if (!this.children[i].id) {
							return this.showToast('请选择分成商家')
						}
					}
					this.dynamicFormData.child = this.children.map(e => ({
						user_id: e.id,
						divide_rate: e.divide_rate
					}))
					api.editGroundChild(this.dynamicFormData).then(res => {
						this.showToast(res.msg)
						uni.navigateBack()
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			},
			formateAreaData(d) {
				this.pro = d;
				this.city = this.pro[0].city;
				this.county = this.city[0].area;
				this.areaList = [this.pro, this.city, this.county]
				if (!this.ground_id) {
					this.dynamicFormData.city = `${this.pro[0].name}/${this.city[0].name}/${this.county[0].name}`
				}
			},
			/**
			 * 选择列
			 */
			selectCol(e) {
				let {
					column,
					value
				} = e.detail;
				this.areaIndexs[column] = value;
				if (column == 0) {
					this.city = this.pro[value].city;
					this.county = this.city[0].area;
				} else if (column == 1) {
					this.county = this.city[value].area;
				}
				this.areaList = [this.pro, this.city, this.county]
			},
			/**
			 * 确定地区 
			 */
			select(e) {
				this.areaIndexs = e.detail.value;
				this.dynamicFormData.city =
					`${this.pro[this.areaIndexs[0]]?.name}/${this.city[this.areaIndexs[1]]?.name}/${this.county[this.areaIndexs[2]]?.name}`
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-content {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding-top: 22rpx;

		.uv-form {
			padding-bottom: 20rpx;

			.uv-form-item {
				align-items: center;
				border-bottom: 2rpx solid #d3ebff;
				margin-bottom: 12rpx;
				padding-bottom: 12rpx;
				font-size: 28rpx !important;

				.uv-form-item__label {
					font-size: 28rpx !important;
				}

				.uv-form-item__content {
					input {
						font-size: 28rpx;
					}

					uni-text {
						position: absolute;
						right: 0;
						top: 0;
						font-size: 28rpx;
						color: #737373;
					}
				}
			}
		}

		.user-box {
			margin: 0 22rpx;
			background: url('/static/images/home/empty-bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 52rpx 42rpx 2rpx;

			.tit {
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				font-style: normal;
				margin-bottom: 20rpx;

				uni-text {
					color: #b0b0b0;
					font-weight: 500;
					font-size: 28rpx;
				}
			}

		}

		.isOpen-block {
			background: #ffffff;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
			border-radius: 16rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 1 1;
			margin: 10rpx 34rpx;
			padding: 34rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.manage-block {
			background: #ffffff;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
			border-radius: 16rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 1 1;
			margin: 10rpx 34rpx;
			padding: 34rpx 30rpx;

			.image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}

			.tit {
				display: flex;
				justify-content: space-between;
			}

			.block-item {
				margin-top: 20rpx;
				// display: flex;
				// align-items: center;

				.item {
					height: 50rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 34rpx;

					uni-picker {
						flex: 3;
						height: 46rpx;
					}

					.rate {
						display: flex;
						flex: 1;

						uni-input {
							flex: 1;
							text-align: center;
							border-bottom: 2rpx solid #e6e5e5;
						}
					}


				}


			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}
	}
</style>